<template>
	<div id="invoicesManagement">
		<van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多数据"
                :immediate-check="false"
                @load="onLoad"
                >
                <template slot="default">
                    <!-- order展示模块 -->
                    <orderShowTemplate 
						v-for="data in tableData"
						:key="data.id" 
						:dataList="data"
						:describe="true"
						:type="'number'"
						:fieldList="[{ message: data.created_at ? `开票时间：${data.created_at}` : '开票时间：暂无' }]"
						@onTitle="$router.push(`/user/details2/${data.id}`)">
						<!-- @onTitle="$router.push({name: 'user-details2', params: {details:tableData[index]}})" -->
					</orderShowTemplate>
                </template>
            </van-list>  
        </van-pull-refresh>
		
		<!-- <van-swipe-cell id="invoicesManagement" v-for="(item,index) in tableData.slice(tableStart,tableEnd)">
			<van-cell value="" @click="$router.push({
			name:'user-details2',
			params:{
				details:tableData[index]
			}
		})" ><template solt="title">
			{{item.order_number}}<br /><font color="royalblue">{{item.status}}</font>
			</template>
		</van-cell>
		</van-swipe-cell>
		<div v-if="isLoading">
			<center>
				<br /><br />
				<van-loading size="24px">加载中...</van-loading><br /><br />
			</center>
		</div> -->
	</div>
</template>

<script>
	import orderShowTemplate from '~/components/_orderShowTmp'
	import {
		isBottom
	} from '~/util/index.js'
	export default {
		data() {
			return {
				tableData: [],
				invoiceArr: [],
				tableStart: 0,
				tableEnd: 15,
				// isLoading: false,
				page:1,
				pullLoading: false,
				loading: false,
				finished: false,
			}
		},
		created() {
			this.getOrderList()
		},//缓存也会走的钩子
		activated() {
			this.getOrderList()
		},
		methods: {
			getOrderList() {
				this.page = 1
				//我的发票列表
				this.$axios.get('api/consumer/invoice?status=开票成功', { params: {
					 page: 1
				} }).then(res => {
					if(res.status === 200) {
						if(res.data.page.total <= 15) {
							this.finished = true
						}else{
							this.finished = false
						}

						this.tableData = res.data.data
						this.pullLoading = false
					}else{
						that.$toast('请求错误');
					}
				})
			},
			onLoad() {
            	setTimeout(() => {
					this.$axios.get('api/consumer/invoice?status=开票成功', { params: {
						page: this.page + 1 
					} }).then(res => {
						if(res.data.data && res.data.data.length > 0) {
							this.page++
							this.tableData.push(...res.data.data)
							this.loading = false
						}else{
							this.loading = false
							this.finished = true
						}
					})
				}, 500);
			},
			onRefresh() {
				setTimeout(() => {
					this.getOrderList()
				}, 500);
			}
		},
		components: {
			orderShowTemplate
		}
	}
</script>

<style lang="less">
	#invoicesManagement {
		margin-bottom: 10px;
		.van-cell__title {
			span {
				display: inline-block;
				/*将span当做块级元素对待*/
				width: 550px;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		.van-button {
			height: 100%;
		}

	}
</style>
